<template>
  <div>
    <!-- 添加或者编辑子部门的组件 -->
    <el-dialog :title="showTitle" :visible="showDialog" @close="cancel" width="70%">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="form.code" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select
            v-model="form.manager"
            placeholder="请选择活动区域"
            style="width: 400px"
          >
            <el-option v-for="item in employeesList" :key="item.id" :label="item.username" :value="item.username"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input
            type="textarea"
            v-model="form.introduce"
            style="width: 400px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {addCompanyDepartment,updateCompanyDepartment,getCompanyDepartment} from "@/api/departments";
import {getSimple} from "@/api/employees"
export default {
  props: {
    // 接收父组件传来的值
    showDialog: {
      type: Boolean,
      default: false,
    },
    // 接收父组件传来树形的值
    node:{
      type:Object
    },
  },
  data() {
    // 新增编辑的表单自定义校验规则 部门名字和部门编码不能重复
    const checkNameRepeat=async (rule,value,callback)=>{
      //获取最新的组织架构数据
      const {depts} = await getCompanyDepartment();
      console.log(depts)
      let isRepeat=false
      //编辑
      // 找到自己当前部门的所有的同级部门
      if(this.form.id){
        isRepeat = depts.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id).some(item => item.name === value)
      }else{
        // 新增
        isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
      }
      return isRepeat?callback(new Error(`已经有${value}这个部门了`)):callback()
    }
    return {
      form: {
        name:"",
        code:"",
        manager:"",
        introduce:""
      },
      employeesList:[],
      rules: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          { min: 1, max: 10, message: "在1-10个字符之间", trigger: "blur" },
          {validator:checkNameRepeat}
        ],
        code: [
          { required: true, message: "请输入部门编码", trigger: "blur" },
          { min: 1, max: 50, message: "在1-50个字符之间", trigger: "blur" },
        ],
        manager: [
          { required: true, message: "请选择部门负责人", trigger: "change" },
        ],
        introduce: [
          { required: true, message: "请输入部门介绍", trigger: "blur" },
          { min: 1, max: 300, message: "在1-300个字符之间", trigger: "blur" },
        ],
      },
    };
  },
  computed:{
    showTitle(){
      return this.form.id?"编辑部门":"新增部门" 
      //显示标题的名称 因为在父组件那里，编辑的时候有给form 赋值，里面就有id，而新增的时候没有给form赋值，所以就没有form.id
    }
  },
  created(){
    this.getSimple()
  },
  methods: {
    // 获取简单的人员姓名
    async getSimple(){
      this.employeesList= await getSimple()
    },
    cancel() {
      this.$refs.ruleForm.resetFields()
      this.$emit("update:showDialog", false);
   
    },
    async sure() {
        // 校验表单
      await this.$refs.ruleForm.validate();
      if(this.form.id){
        //编辑部门
        await updateCompanyDepartment(this.form)
        await this.$message.success("编辑成功")
      }else{
        // 添加组织部门
        console.log(this.node.pid)
        // 因为是添加子部门，所以我们需要将新增的部门pid设置成当前部门的id，新增的部门就成了自己的子部门
        await addCompanyDepartment({...this.form,pid:this.node.id})
        await this.$message.success("添加成功")
      }
         this.$emit("update:showDialog",false)//通知父组件（绑定了showDialog属性）关闭弹层
        this.$emit("addDepartment") //通知父组件（绑定了addDepartment事件）更新
        
    },
  },
};
</script>